<template>
	<nav>
		<router-link v-for="nav in navData" :key="nav.path" :to="nav.path" :title="nav.desc">
      {{ nav.name }}
    </router-link>
	</nav>
	<router-view></router-view>
</template>

<script setup>
  import { ref } from 'vue'

  const navData = ref([
    {
      name: '立方体',
      path: '/'
    },
    {
      name: '加载模型',
      path: '/other'
    },
    {
      name: '学习 简单控制',
      desc: '坐标辅助器，轨道控制器，物体位移，父子元素，缩放，旋转，响应式画布，全屏',
      path: '/learn'
    },
    {
      name: '学习 GUI控制器调试',
      path: '/learn2'
    },
    {
      name: '学习 几何体',
      path: '/learn3'
    }
  ])
</script>

<style scoped>
	nav {
		position: fixed;
		z-index: 9999;
		color: #fff;
		width: 100%;
		text-align: center;
    display: flex;
    justify-content: center;
	}
	nav a {
		color: #ccc;
		text-decoration: none;
    border-right: 1px solid #fff;
    padding: 0 8px;
	}
  nav a:last-child {
    border: 0;
  }
  .router-link-active {
		color: red;
		font-weight: bold;
	}
</style>

